<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
    <div id="app">
        <p title="nihao" ref="hello">{{msg}}</p>
    </div>
    <script>
        var app =new Vue({
            // 内部没有el，可以手动进行$mount("#app")挂载
            // el:"#app",
            data:{
                msg:"你好"
            },
            beforeCreate(){
                // 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用
                console.log("生命周期：beforeCreate");
                console.log('加载data中的msg数据---'+this.msg);
                console.log('获取节点$el---'+this.$el);
                this.initMethod()
            },
            created(){
                // 数据 injections 和reactivity 注入 响应
                // 在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数
                console.log("生命周期：created");
                console.log('加载data中的msg数据---'+this.msg);
                console.log('获取节点$el---'+this.$el);
                this.initMethod()
            },
            beforeMount(){
                // 生成虚拟dom  在挂载开始之前被调用：相关的 render 函数首次被调用。
                console.log("生命周期：beforeMount");
                console.log(this.$el);
                console.log(this.$refs);
            },
            mounted(){
                // 真实的dom   实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了
                console.log("生命周期：mounted");
                console.log(this.$el);
                console.log(this.$refs);
            },
            beforeUpdate(){
                // data 数据改变 beforeUpdate函数中的数据没有改变  app.msg = 123     this.msg=123
                console.log("生命周期：beforeUpdate");
                console.log(this._vnode.children[0].children[0].text);
            },
            updated(){
                // 通过patch算法 对比实际dom和渲染虚拟dom 更新数据 
                console.log("生命周期：beforeUpdate");
                console.log(this._vnode.children[0].children[0].text);
            },
            beforeDestroy(){
                // 使用app.$destroy  卸载对象与vue的绑定
                console.log("生命周期：beforeDestroy");

            },
            destroyed(){
                console.log("生命周期：destroyed");

            },
            methods: {
                initMethod(){
                    console.log('初始化方法调用成功');
                }
            },

        }).$mount("#app");
    </script>
</body>
</html>